<script setup>
import { ref } from 'vue';
import Card from '../components/card.vue';
import Search from '../components/search.vue';

// 模拟数据获取
const fetchCards = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          title: "创意/03'14'",
          description: '灵感爆棚必看的[最疯狂的脑洞风暴]',
          image: 'https://codelover.club/coursefiles/images/film/创意.jpeg',
          tag: ''
        },
        {
          id: 2,
          title: "剧情/03'14'",
          description: '悬疑迷不可错过的[最烧脑的叙事迷宫]',
          image: 'https://codelover.club/coursefiles/images/film/剧情.jpeg',
          tag: ''
        },
        {
          id: 3,
          title: "动画/03'14'",
          description: '二次元宅必追的[最治愈的奇幻之旅]',
          image: 'https://codelover.club/coursefiles/images/film/动画.jpeg'
        },
        {
          id: 4,
          title: "励志/03'14'",
          description: '低谷期必刷的[最热血的人生逆袭]',
          image: 'https://codelover.club/coursefiles/images/film/励志.jpeg',
          tag: ''
        },
        {
          id: 5,
          title: "实验/03'14'",
          description: '艺术先锋必试的[最颠覆的视觉冲击]',
          image: 'https://codelover.club/coursefiles/images/film/实验.jpeg'
        },
        {
          id: 6,
          title: "广告/03'14'",
          description: '营销人必学的[最洗脑的创意炸弹]',
          image: 'https://codelover.club/coursefiles/images/film/广告.jpeg'
        },
        {
          id: 7,
          title: "搞笑/03'14'",
          description: '解压必备的[最无厘头爆笑名场面]',
          image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg'
        },
        {
          id: 8,
          title: "旅行/03'14'",
          description: '背包客私藏的[最惊艳的小众秘境]',
          image: 'https://codelover.club/coursefiles/images/film/旅行.jpeg',
          tag: ''
        }
      ]);
    }, 500);
  });
};

const cards = ref([]);

// 获取卡片数据
fetchCards().then(data => {
  cards.value = data;
});

const handleCardClick = (cardId) => {
  console.log('卡片被点击:', cardId);
  // 这里可以添加路由跳转或其他逻辑
};
</script>

<template>
  <div class="card-list-page">
    <Search />
    <div class="card-list-container">
      <Card v-for="card in cards" :key="card.id" :card-data="card" @card-click="handleCardClick" class="card-item" />
    </div>
  </div>
</template>

<style scoped>
.card-list-page {
  width: 100%;
  height: 100vh;
  /* padding: 20px; */
  box-sizing: border-box;
  background-color: #f5f5f5;
  margin-top: 42px;
}

.card-list-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  /* gap: 20px; */
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 5px;
}

.card-item {
  /* aspect-ratio: 1/1; */
  /* 保持卡片为正方形 */
}

/* @media (max-width: 768px) {
  .card-list-container {
    grid-template-columns: 1fr;
  }
  
  .card-list-page {
    padding: 10px;
  }
} */
</style>